<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷系统Bug分析报告</title>
    
    <!-- 引入必要的CSS和JS库 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 内联数据区 -->
    <script>
        // 样例Bug数据（前10条）
        const sampleData = [
  {
    "bug_id": "Bug1",
    "page": "首页",
    "description": "测试场景：点击我的考试\n预期结果：显示我的问卷列表\n实际结果：列表为空\nBug：首页我的考试点击后列表为空\n严重程度：高\n优先级：高",
    "test_scenario": "点击我的考试",
    "expected_result": "显示我的问卷列表",
    "actual_result": "列表为空",
    "severity": "高",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug1",
    "page": "我的项目",
    "description": "测试场景：新建点击回收站，在输入框输入已被删除的项目名称，点击彻底删除\n\n预期结果：点击后项目彻底删除\n\n实际结果：点击后无反应\n\nBug：我的项目回收站输入项目名称后点击彻底删除无反应\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "新建点击回收站，在输入框输入已被删除的项目名称，点击彻底删除",
    "expected_result": "点击后项目彻底删除",
    "actual_result": "点击后无反应",
    "severity": "高",
    "bug_type": "功能错误"
  },
  {
    "bug_id": "Bug1",
    "page": "我的题库",
    "description": "测试场景：点击导出\n\n预期结果：可将题目批量按照指定格式导出\n\n实际结果：没有反应\n\nBug：我的题库点击导出没有反应\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "点击导出",
    "expected_result": "可将题目批量按照指定格式导出",
    "actual_result": "没有反应",
    "severity": "高",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug1",
    "page": "我的笔记",
    "description": "测试场景：点击创建时间\n\n预期结果：错题列表按照升序或降序排列\n\n实际结果：没有变化\n\nBug：我的笔记点击创建时间排序没有变化\n\n严重程度：中\n\n优先级：中",
    "test_scenario": "点击创建时间",
    "expected_result": "错题列表按照升序或降序排列",
    "actual_result": "没有变化",
    "severity": "中",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug1",
    "page": "模板广场",
    "description": "测试场景：正确填写模板名称，点击搜索模板\n\n预期结果：显示出搜索的模板\n\n实际结果：显示空白\n\nBug：模板广场搜索功能无法正常使用\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "正确填写模板名称，点击搜索模板",
    "expected_result": "显示出搜索的模板",
    "actual_result": "显示空白",
    "severity": "高",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug1",
    "page": "用户管理",
    "description": "测试场景：点击新建，全部不填写\n\n预期结果：提示“用户名不能为空”，“登录名不能为空”，“密码不能为空”\n\n实际结果：没有提示，直接跳转\n\nBug：用户管理新建用户时未进行表单验证\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "点击新建，全部不填写",
    "expected_result": "提示“用户名不能为空”，“登录名不能为空”，“密码不能为空”",
    "actual_result": "没有提示，直接跳转",
    "severity": "高",
    "bug_type": "功能错误"
  },
  {
    "bug_id": "Bug1",
    "page": "组织机构",
    "description": "测试场景：点击新建，全部填写\n\n预期结果：组织机构新增机构\n\n实际结果：输入框缺少上级部门选择项\n\nBug：组织机构新建缺少上级部门选择\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "点击新建，全部填写",
    "expected_result": "组织机构新增机构",
    "actual_result": "输入框缺少上级部门选择项",
    "severity": "高",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug1",
    "page": "个人设置",
    "description": "测试场景：点击修改密码，新密码确认密码输入空格点击确认\n\n预期结果：提示密码不能为空，长度不能少于6位\n\n实际结果：提示“两次密码输入不一致”\n\nBug：个人设置修改密码时验证逻辑错误\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "点击修改密码，新密码确认密码输入空格点击确认",
    "expected_result": "提示密码不能为空，长度不能少于6位",
    "actual_result": "提示“两次密码输入不一致”",
    "severity": "高",
    "bug_type": "功能错误"
  },
  {
    "bug_id": "Bug2",
    "page": "首页",
    "description": "测试场景：点击我的问卷\n预期结果：显示我的问卷列表\n实际结果：列表为空\nBug：首页我的问卷点击后列表为空\n严重程度：高\n优先级：高",
    "test_scenario": "点击我的问卷",
    "expected_result": "显示我的问卷列表",
    "actual_result": "列表为空",
    "severity": "高",
    "bug_type": "界面显示"
  },
  {
    "bug_id": "Bug2",
    "page": "我的笔记",
    "description": "测试场景：点击我的收藏\n\n预期结果：显示收藏列表\n\n实际结果：列表为空\n\nBug：我的笔记我的收藏列表为空\n\n严重程度：高\n\n优先级：高",
    "test_scenario": "点击我的收藏",
    "expected_result": "显示收藏列表",
    "actual_result": "列表为空",
    "severity": "高",
    "bug_type": "界面显示"
  }
];

        // 各页面Bug统计数据
        const pageData = [{"page": "首页", "count": 4}, {"page": "用户管理", "count": 3}, {"page": "组织机构", "count": 2}, {"page": "我的笔记", "count": 2}, {"page": "我的题库", "count": 1}, {"page": "我的项目", "count": 1}, {"page": "模板广场", "count": 1}, {"page": "个人设置", "count": 1}];
        
        // Bug严重程度统计数据
        const severityData = [{"severity": "高", "count": 13}, {"severity": "中", "count": 2}];
        
        // Bug类型统计数据
        const typeData = [{"type": "界面显示", "count": 9}, {"type": "功能错误", "count": 6}];
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 页面头部 -->
    <header class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="bg-red-100 p-3 rounded-lg">
                        <i class="fas fa-bug text-red-600 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">问卷系统Bug分析报告</h1>
                        <p class="text-gray-600 mt-1">全面分析系统缺陷，助力质量提升</p>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-red-600">15</div>
                    <div class="text-sm text-gray-500">总Bug数量</div>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 关键指标卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">总Bug数量</p>
                        <p class="text-2xl font-bold text-gray-900">15</p>
                    </div>
                    <div class="bg-red-100 p-3 rounded-lg">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">涉及页面</p>
                        <p class="text-2xl font-bold text-gray-900">8</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-lg">
                        <i class="fas fa-sitemap text-blue-600"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">高优先级</p>
                        <p class="text-2xl font-bold text-red-600">13</p>
                    </div>
                    <div class="bg-red-100 p-3 rounded-lg">
                        <i class="fas fa-fire text-red-600"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">界面显示问题</p>
                        <p class="text-2xl font-bold text-orange-600">9</p>
                    </div>
                    <div class="bg-orange-100 p-3 rounded-lg">
                        <i class="fas fa-desktop text-orange-600"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- 各页面Bug分布 -->
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center mb-6">
                    <i class="fas fa-chart-bar text-blue-600 mr-3"></i>
                    <h2 class="text-xl font-semibold text-gray-900">各页面Bug分布</h2>
                </div>
                <div class="h-80">
                    <canvas id="pageChart"></canvas>
                </div>
            </div>

            <!-- Bug严重程度分布 -->
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <div class="flex items-center mb-6">
                    <i class="fas fa-chart-pie text-red-600 mr-3"></i>
                    <h2 class="text-xl font-semibold text-gray-900">Bug严重程度分布</h2>
                </div>
                <div class="h-80">
                    <canvas id="severityChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Bug类型分布 -->
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200 mb-8">
            <div class="flex items-center mb-6">
                <i class="fas fa-chart-donut text-green-600 mr-3"></i>
                <h2 class="text-xl font-semibold text-gray-900">Bug类型分布</h2>
            </div>
            <div class="h-80">
                <canvas id="typeChart"></canvas>
            </div>
        </div>

        <!-- 样例数据表格 -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center">
                    <i class="fas fa-table text-purple-600 mr-3"></i>
                    <h2 class="text-xl font-semibold text-gray-900">Bug详细信息（样例数据）</h2>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bug ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">页面</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">严重程度</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试场景</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际结果</th>
                        </tr>
                    </thead>
                    <tbody id="bugTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- 表格内容将通过JavaScript填充 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分析总结 -->
        <div class="bg-white rounded-xl shadow-sm p-8 border border-gray-200">
            <div class="flex items-center mb-6">
                <i class="fas fa-lightbulb text-yellow-600 mr-3"></i>
                <h2 class="text-2xl font-semibold text-gray-900">Bug分析总结</h2>
            </div>
            
            <div class="prose max-w-none text-gray-700 leading-relaxed">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-search text-blue-600 mr-2"></i>
                            关键发现
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <span><strong>首页问题最严重：</strong>共发现4个Bug，主要集中在"我的考试"和"我的问卷"功能，点击后列表显示为空。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <span><strong>用户管理问题突出：</strong>3个Bug主要涉及表单验证缺失和错误提示问题。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <span><strong>高优先级Bug占主导：</strong>13个Bug（87%）为高优先级，需要紧急修复。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <span><strong>界面显示问题最多：</strong>9个Bug（60%）属于界面显示类问题。</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-tools text-green-600 mr-2"></i>
                            修复建议
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <span><strong>优先修复首页：</strong>首页作为用户入口，应优先解决列表显示为空的问题。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <span><strong>加强表单验证：</strong>用户管理和个人设置页面需要完善表单验证逻辑。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <span><strong>优化数据加载：</strong>重点检查列表数据加载逻辑，确保数据正确显示。</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <span><strong>完善错误处理：</strong>增加适当的错误提示和异常处理机制。</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="mt-8 p-6 bg-red-50 rounded-lg border border-red-200">
                    <h3 class="text-lg font-semibold text-red-900 mb-3 flex items-center">
                        <i class="fas fa-exclamation-circle text-red-600 mr-2"></i>
                        风险评估
                    </h3>
                    <p class="text-red-800 leading-relaxed">
                        本次测试发现的15个Bug中，13个为高优先级问题，主要影响用户的核心操作流程。
                        首页的功能异常会直接影响用户体验，用户管理模块的表单验证缺失可能导致数据完整性问题。
                        建议在下次发布前优先修复这些高优先级Bug，并进行全面的回归测试，确保系统稳定性和用户体验。
                    </p>
                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript代码 -->
    <script>
        // 填充Bug表格
        function populateBugTable() {
            const tbody = document.getElementById('bugTableBody');
            tbody.innerHTML = '';
            
            sampleData.forEach(bug => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors duration-200';
                
                const severityColor = bug.severity === '高' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800';
                const typeColor = bug.bug_type === '界面显示' ? 'bg-orange-100 text-orange-800' : 'bg-blue-100 text-blue-800';
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${bug.bug_id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${bug.page}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full ${severityColor}">${bug.severity}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full ${typeColor}">${bug.bug_type}</span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate" title="${bug.test_scenario}">${bug.test_scenario}</td>
                    <td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate" title="${bug.actual_result}">${bug.actual_result}</td>
                `;
                
                tbody.appendChild(row);
            });
        }

        // 创建页面Bug分布柱状图
        function createPageChart() {
            const ctx = document.getElementById('pageChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: pageData.map(item => item.page),
                    datasets: [{
                        label: 'Bug数量',
                        data: pageData.map(item => item.count),
                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        },
                        x: {
                            ticks: {
                                maxRotation: 45
                            }
                        }
                    }
                }
            });
        }

        // 创建严重程度饼状图
        function createSeverityChart() {
            const ctx = document.getElementById('severityChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: severityData.map(item => item.severity),
                    datasets: [{
                        data: severityData.map(item => item.count),
                        backgroundColor: [
                            'rgba(239, 68, 68, 0.8)',
                            'rgba(245, 158, 11, 0.8)'
                        ],
                        borderColor: [
                            'rgba(239, 68, 68, 1)',
                            'rgba(245, 158, 11, 1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // 创建Bug类型环形图
        function createTypeChart() {
            const ctx = document.getElementById('typeChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: typeData.map(item => item.type),
                    datasets: [{
                        data: typeData.map(item => item.count),
                        backgroundColor: [
                            'rgba(249, 115, 22, 0.8)',
                            'rgba(59, 130, 246, 0.8)'
                        ],
                        borderColor: [
                            'rgba(249, 115, 22, 1)',
                            'rgba(59, 130, 246, 1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            populateBugTable();
            createPageChart();
            createSeverityChart();
            createTypeChart();
        });
    </script>
</body>
</html>